<template>
  <div class="mydrawer">
    <el-drawer v-model="drawer.visible" title="资产详情" size="50%" close-on-click-modal @close="hide">
      <div class="text-sm font-semibold">小程序信息</div>
      <div class="grid gap-4 grid-cols-3 mt-4">
        <div style="min-width: 30%">
          <div class="text-xs text-gray">小程序名称</div>
          <div class="text-xs mt-1">{{ shareInfo.appName }}</div>
        </div>
        <div style="min-width: 30%">
          <div class="text-xs text-gray">资产ID</div>
          <div class="text-xs mt-1">{{ shareInfo.instanceId }}</div>
        </div>
        <div style="min-width: 30%">
          <div class="text-xs text-gray">小程序原始ID</div>
          <div class="text-xs mt-1">{{ shareInfo.userName }}</div>
        </div>

        <div style="min-width: 30%">
          <div class="text-xs text-gray">APPID</div>
          <div class="text-xs mt-1">{{ shareInfo.appId }}</div>
        </div>
        <div style="min-width: 30%">
          <div class="text-xs text-gray">小程序备注</div>
          <div class="text-xs mt-1">{{ shareInfo.remarkMessage }}</div>
        </div>
        <div style="min-width: 30%">
          <div class="text-xs text-gray">细分分类</div>
          <div class="text-xs mt-1">{{ shareInfo.tagInfoDesc }}</div>
        </div>
        <div style="min-width: 30%">
          <div class="text-xs text-gray">小程序路径</div>
          <el-tooltip class="item" effect="dark" :content="shareInfo.path" placement="top">
            <div class="text-xs mt-1 overflow-hidden text-ellipsis whitespace-nowrap">{{ shareInfo.path }}</div>
          </el-tooltip>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
const shareInfo = ref();

const drawer = reactive<DialogOption>({
  visible: false
});

/**
 *  显示
 */
const show = (info: any) => {
  if (info) {
    shareInfo.value = info;
  }
  drawer.visible = true;
  nextTick(() => {});
};

/**
 * 隐藏
 */
const hide = () => {
  drawer.visible = false;
};

defineExpose({
  show,
  hide
});
</script>
